<template>
  <nav class="navbar">
    <div class="navbar-bg"></div>
    <div class="navbar-container">
      <div class="nav-links active">
        <router-link to="/" class="nav-link">首页</router-link>
        <router-link to="/photographers" class="nav-link">自选摄影师</router-link>
        <router-link to="/portfolio" class="nav-link">客照欣赏</router-link>
        <router-link to="/about" class="nav-link">关于我们</router-link>
        <!-- <router-link to="/upload-test" class="nav-link">上传测试</router-link> -->
        <el-button type="primary" class="login-btn" v-if="!isLoggedIn" @click="handleLogin">
          登录
        </el-button>
        <el-button
          type="primary"
          class="login-btn"
          v-if="isLoggedIn && userRole === 'user'"
          @click="handleBooking"
        >
          立即预约
        </el-button>
        <!-- 已登录显示个人中心下拉菜单 -->
        <template v-if="isLoggedIn">
          <el-dropdown trigger="click" @command="handleCommand">
            <el-button type="primary" size="small">
              我的 <el-icon class="el-icon--right"><arrow-down /></el-icon>
            </el-button>

            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item command="personal">个人资料</el-dropdown-item>
                <div v-if="userRole === 'photographer'">
                  <el-dropdown-item command="booking-manage">我的预约</el-dropdown-item>
                  <el-dropdown-item command="review-manage">评价列表</el-dropdown-item>
                  <!-- <el-dropdown-item command="order-manage">我的订单</el-dropdown-item>
                  <el-dropdown-item command="order-manage">我的作品</el-dropdown-item> -->
                </div>
                <div v-if="userRole === 'user'">
                  <el-dropdown-item command="booking-manage">我的预约</el-dropdown-item>
                  <el-dropdown-item command="order-manage">我的订单</el-dropdown-item>
                  <el-dropdown-item command="review-manage">我的评价</el-dropdown-item>
                </div>
                <el-dropdown-item divided command="logout">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </template>
      </div>
    </div>
  </nav>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'
import { useUserStore } from '@/stores/user'
import { storeToRefs } from 'pinia'
import { ArrowDown } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import { onMounted } from 'vue'

const router = useRouter()
const userStore = useUserStore()
// 使用 storeToRefs 来保持响应性
const { isLoggedIn, userRole } = storeToRefs(userStore)

const handleCommand = (command: string) => {
  switch (command) {
    case 'personal':
      router.push('/profile/info')
      break
    case 'customer-manage':
      router.push('/customer-manage')
      break
    case 'photographer-manage':
      router.push('/photographer-manage')
      break
    case 'admin-manage':
      router.push('/admin-manage')
      break
    case 'dress-manage':
      router.push('/dress-manage')
      break
    case 'booking-manage':
      router.push('/booking-manage')
      break
    case 'order-manage':
      router.push('/order-manage')
      break
    case 'review-manage':
      router.push('/review-manage')
      break
    case 'sample-manage':
      router.push('/sample-manage')
      break
    case 'package-manage':
      router.push('/package-manage')
      break
    case 'banner-manage':
      router.push('/banner-manage')
      break
    case 'logout':
      userStore.clearUserInfo()
      ElMessage.success('退出成功')
      router.push('/')
      break
  }
}

const handleLogin = () => {
  router.push({
    path: '/login',
  })
}

const handleBooking = () => {
  router.push('/booking')
}

onMounted(() => {})
</script>
<style scoped>
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  transition: all 0.3s ease;
  height: 120px;
  background-color: white;
}

.navbar-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  background-image: url('@/assets/header_bg.png');
  background-size: cover;
  background-position: center;
  opacity: 0.95;
  z-index: -1;
}

.navbar-scrolled .navbar-bg {
  opacity: 0.98;
  backdrop-filter: blur(10px);
}

.navbar-container {
  max-width: 1200px;
  margin: 60px 10% 0 23%;
  /* padding: 0 2rem; */
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 3rem;
}

.nav-link {
  color: white;
  text-decoration: none;
  font-size: 1.1rem;
  font-weight: 500;
  transition: all 0.3s ease;
  padding: 0.5rem 1rem;
  border-radius: 4px;
}

.nav-link:hover {
  color: var(--accent-color);
  background: rgba(255, 255, 255, 0.1);
}

.login-btn {
  background: var(--accent-color) !important;
  border-color: var(--accent-color) !important;
  padding: 0.8rem 1.5rem;
  border-radius: 25px !important;
  font-size: 0.9rem;
  margin-left: 1rem;
}
</style>
